<!-- src/components/AddressPanel.vue -->
<script setup lang="ts">
import { useAddressStore, useMemberStore } from '@/stores'
import { ref } from 'vue'
import type { AddressItem } from '@/types/address'

// 获取地址列表 props
const props = defineProps<{
  addressList: AddressItem[]
}>()
const emits = defineEmits<{
  (e: 'close'): void
}>()
const memberStore = useMemberStore()
const addressStore = useAddressStore()

// 如果在其他页面选中了地址，那就直接作为初始值
const activeAddressId = ref<string>(addressStore.selectedAddress?.id || '')
const chooseAddress = (addressId: string) => {
  activeAddressId.value = addressId
}

const onConfirm = () => {
  if (!activeAddressId.value) return uni.showToast({ icon: 'none', title: '请选择收货地址' })

  const activeAddress = props.addressList.find((address) => address.id === activeAddressId.value)
  // 可以点击确定按钮，activeAddressId 一定是存在的，那 activeAddress 也一定是存在的
  addressStore.setSelectedAddress(activeAddress!)
  emits('close')
}
</script>

<template>
  <view class="address-panel">
    <!-- 关闭按钮 -->
    <text class="close icon-close" @click="emits('close')"></text>
    <view class="login-blank" v-if="!memberStore.profile">
      <text class="text">登录后可查看收货地址</text>
      <navigator url="/pages/login/login" hover-class="none">
        <button class="button">去登录</button>
      </navigator>
    </view>

    <template v-else>
      <!-- 标题 -->
      <view class="title">配送至</view>
      <!-- 内容 -->
      <view class="content">
        <view
          class="item"
          v-for="address in props.addressList"
          :key="address.id"
          @tap="chooseAddress(address.id)"
        >
          <view class="user">{{ address.receiver }} {{ address.contact }}</view>
          <view class="address">{{ address.fullLocation }} {{ address.address }}</view>
          <text
            class="icon icon-checked"
            :class="{ 'icon-ring': activeAddressId !== address.id }"
          ></text>
        </view>
      </view>
      <view class="footer">
        <navigator
          url="/pagesMember/pages/address/address-form"
          class="button primary"
          hover-class="none"
          >新建地址
        </navigator>
        <view v-if="activeAddressId" @tap="onConfirm" class="button primary">确定</view>
      </view>
    </template>
  </view>
</template>

<style lang="scss">
.address-panel {
  padding: 0 30rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  background-color: #fff;
}

.title {
  line-height: 1;
  padding: 40rpx 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: normal;
  border-bottom: 1rpx solid #ddd;
  color: #444;
}

.close {
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.login-blank {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 500rpx;

  .text {
    color: #444;
    font-size: 26rpx;
    margin: 20rpx 0;
  }

  .button {
    width: 240rpx;
    height: 60rpx;
    line-height: 60rpx;
    margin-top: 20rpx;
    font-size: 26rpx;
    border-radius: 60rpx;
    color: #fff;
    background-color: #27ba9b;
  }
}

.content {
  overflow: auto;
  padding: 20rpx;
  min-height: 300rpx;
  max-height: 540rpx;

  .item {
    padding: 30rpx 50rpx 30rpx 60rpx;
    background-size: 40rpx;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
    position: relative;
  }

  .icon {
    font-size: 40rpx;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 0;
  }

  .icon-checked {
    color: #27ba9b;
  }

  .icon-ring {
    color: #444;
  }

  .user {
    font-size: 28rpx;
    color: #444;
    font-weight: 500;
  }

  .address {
    font-size: 26rpx;
    color: #666;
  }
}

.footer {
  display: flex;
  padding: 20rpx 0 40rpx;
  font-size: 28rpx;
  color: #444;

  .button {
    flex: 1;
    height: 72rpx;
    text-align: center;
    line-height: 72rpx;
    margin: 0 20rpx;
    color: #fff;
    border-radius: 72rpx;
  }

  .primary {
    color: #fff;
    background-color: #27ba9b;
  }

  .secondary {
    background-color: #ffa868;
  }
}
</style>
